<!--全局弹窗-->
<template>
  <el-dialog
    class="msg-dialog"
    :style="{cursor: msgInfo.type == 'paying' ? 'not-allowed' : 'auto'}"
    :visible.sync="msgInfo.visible"
    :close-on-click-modal="false"
    width="260px"
  >
    <div class="content">
      <svg-icon :icon-class="msgInfo.type" class="icon" />
      <strong
        v-if="msgInfo.title"
        :class="msgInfo.type"
        class="title"
      >
        {{ msgInfo.title }}
      </strong>
      <div v-if="msgInfo.msg" class="tips">{{ msgInfo.msg }}</div>
    </div>
  </el-dialog>
</template>

<script>
let _STATIC = ''
export default {
  name: 'MsgDialog',
  data() {
    return {}
  },
  computed: {
    msgInfo() {
      return this.$store.state.message.msgInfo
    }
  },
  watch: {
    'msgInfo.tag'() {
      // 默认2s后自动消失
      if (this.msgInfo.visible && this.msgInfo.type !== 'paying') {
        _STATIC && clearTimeout(_STATIC)
        if (!this.msgInfo.isConfirm) {
          _STATIC = setTimeout(_ => {
            this.$store.dispatch('message/SetMsgInfo', {
              visible: false,
              type: ''
            })
          }, this.msgInfo.duration)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .content{
    width: 100%;
    .tips{
      width: 100%;
      text-align: center;
      word-break: break-all;
    }
  }
</style>
